<template>
	<div class="CMutilLabel">
		<span class="name" v-bind:style="{ width: nameWidth + 'px' }" v-text="name"></span>
		<div class="label-panel">
			<span class="label" 
				v-bind:class="{'label-select': current == index}" 
				v-for="(item, index) in labels" 
				v-text="item"
				@click="selectItem(index)"></span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CMutilLabel',
		data() {
			return {
			}
		},
		methods:{
			selectItem: function (index) {
		      	this.$emit('on-sel-item', this.id, index);
		    }
		},
		props: ['name', 'labels', 'nameWidth', 'current', 'id']
	}
</script>

<style scoped="scoped">
	.CMutilLabel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		-webkit-align-items: center;
		-moz-align-items: center;
	}
	
	.name {
		font-size: 14px;
		margin-right: 10px;
		text-align: right;
		display: block;
	}
	
	.label-panel {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		margin-top: -10px;
		flex: 1;
		-webkit-flex: 1;
		-moz-flex: 1;
	}
	
	.label {
		font-size: 13px;
		border: 1px solid #000000;
		border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		padding: 2px 6px;
		margin-right: 8px;
		color: #000000;
		opacity: 0.87;
		cursor: pointer;
		margin-top: 10px;
	}
	
	.label:hover {
		color: #FF0000;
		border: 1px solid #FF0000;
	}
	
	.label-select {
		color: #FF0000;
		border: 1px solid #FF0000;
	}
</style>